<template>
  <!--名单剔除-->
  <section class="component modify-role">
    <el-form :model="addModel" :rules="rules" ref="form" label-width="90px" class="tableInput" @submit.native.prevent>
      <el-form-item label="账户号：" prop="caseNumber" v-if="disabled">
        <el-input v-model="addModel.caseNumber" :maxlength="36"></el-input>
        <el-button class="marginLeft" @click="query">查询</el-button>
      </el-form-item>
      <el-form-item label="客户号：" prop="customerNo" v-else>
        <el-input v-model="addModel.customerNo" ></el-input>
        <el-button class="marginLeft" @click="query">查询</el-button>
      </el-form-item>
      <el-row v-if="hiddenShow">
        <el-form-item label="客户姓名：">{{addModel.personalName}}
        </el-form-item>
        <!-- <el-form-item label="还款日期：" v-if="disabled">{{$filter.dateFormat(addModel.payDate)}}
        </el-form-item> -->
        <el-form-item label="还款日期：" v-if="disabled">{{ addModel.payDate }}
        </el-form-item>
        <el-form-item label="客户号：" v-if="disabled">{{addModel.personalNo}}
        </el-form-item>
      </el-row>
    </el-form>
    <div class="operate-buttons">
      <el-button @click="close">取消</el-button>
      <el-button @click="commit" :disabled="!hiddenShow">下一步</el-button>
    </div>
    <el-dialog :title="this.operationType.DEFAULT === 'ACCOUNT_ELIMINATION'?'新增账户剔除':'新增客户剔除'" :center="true" :visible.sync="show" width="890px" append-to-body @open="$nextTick(() => $refs['add-list-item'].reset())" :close-on-click-modal="false">
      <add-list-item :roleData="roleObj" @close="show = false;close() " ref="add-list-item"></add-list-item>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { State, Getter, Action } from "vuex-class";
import { ListRemovedService } from "~/services/domain-service/list-removed.service";
import AddListItem from "./add-list-item.vue"
import { Emit, Prop, Watch } from "vue-property-decorator";
import { OPERATION_TYPE } from "~/config/enum.config";

@Component({
  components: { AddListItem }
})
export default class AddList extends Vue {
  @Dependencies(ListRemovedService)
  private listRemovedService: ListRemovedService;

  @Prop({ type: Object })
  private roleData: any;

  private addModel: any = {
    caseNumber: '',
    payDate: '',
    customerNo: '',
    personalNo: '',
    personalName: ''
  };
  private rules: any = {
    caseNumber: [{ required: true, message: "请输入账户号", trigger: "blur" }],
    customerNo: [{ required: true, message: "请输入客户号", trigger: "blur" }]
  };
  // 页面按钮类型
  private operationType: any = OPERATION_TYPE
  private roleObj: any = {}
  private show = false
  private hiddenShow = false
  private disabled: boolean = true

  @Emit("close")
  public close () { this.hiddenShow = false }

  private query () {
    const Form: any = this.$refs["form"];
    Form.validate(valid => {
      if (!valid) {
        this.$message.error('请输入查询条件！')
        return false
      } else {
        this.operationType.DEFAULT === 'ACCOUNT_ELIMINATION' ? this.account() : this.customer()
      }
    })
  };

  /**
   * 提交验证并并与数据库交互
   */
  private commit () {
    const Form: any = this.$refs["form"];
    Form.validate(valid => {
      if (!valid) return
      if (!this.addModel.personalName) {
        this.$message.error('请输入正确的查询条件')
        return false
      } else {
        this.show = true
      }
    })
    setTimeout(() => {
      this.addModel = {}
      this.hiddenShow = false
    }, 1000)
  }

  /**
   * 根据账户号查询
   */
  private account () {
    this.listRemovedService.findCaseInfo(this.addModel).subscribe(data => {
      if (typeof data === 'object') {
        this.addModel = data
        this.roleObj = { ...this.addModel }
        this.operationType.DEFAULT = 'ACCOUNT_ELIMINATION'
        this.hiddenShow = true
      } else {
        this.$message.warning('请输入正确的查询条件')
        this.addModel = {}
      }
    })
  }
  /**
   * 根据客户号查询
   */
  private customer () {
    this.listRemovedService.findCustomerNo(this.addModel).subscribe(data => {
      if (typeof data[0] === 'object') {
        this.addModel = data[0]
        this.addModel.customerNo = data[0].personalNo
        this.roleObj = { ...this.addModel }
        this.operationType.DEFAULT = 'CUSTOMER_ELIMINATION'
        this.hiddenShow = true
      } else {
        this.$message.warning('请输入正确的查询条件')
        this.addModel = {}
      }
    })
  }
  private reset () {
    const from: any = this.$refs["form"];
    from.resetFields();
    this.operationType.DEFAULT === 'ACCOUNT_ELIMINATION' ? this.disabled = true : this.disabled = false
    this.addModel = this.roleData

  }
}
</script>

<style lang="less" scoped>
.marginLeft {
  margin-left: 20px !important;
}
</style>
